<template>
  <div class="side-nav top">
    <el-menu router
             ref="navbar"
             :default-active="onRoutes"
             mode="horizontal"
             @select="selectMenu"
             @open="openMenu"
             @close="closeMenu"
             theme="dark"
             class="el-menu-demo"
             background-color="#283443"
             text-color="#fff"
             active-text-color="#ffd04b">
      <nav-item v-for="(item, n) in navList"
                :item="item"
                :navIndex="String(n)"
                :key="n"></nav-item>
    </el-menu>
    <div v-if="this.navMode == 'horizontal'"
         v-show="navBgShow"
         class="full-screen-navBg"
         @click.self="closeAll"></div>
  </div>
</template>

<script>
import navItem from './navItem'

export default {
  data() {
    return {
      navBgShow: false,
      navList: [
        {
          name: '渠道用户清单',
          child: [
            {
              name: '渠道用户清单',
              path: '/chanelinfo'
            }
            // {
            //   name: '计划表',
            //   path: '/plant'
            // },
            // {
            //   name: '统计表',
            //   path: '/stats'
            // }
          ]
        }
      ]
    }
  },
  props: ['layout'],
  computed: {
    onRoutes() {
      return this.$route.path
    },
    navMode() {
      return 'horizontal'
    }
  },
  methods: {
    // eslint-disable-next-line
    selectMenu(index, indexPath) {
      /**
       * 在选择父级菜单时自动关闭其下所有子菜单
       * 选择时获取点击菜单的父级index，并计算得到该index在已打开菜单中的索引值，
       * 关闭位于当前打开菜单中该索引值之后的全部菜单
       */
      // 获取当前打开的所有菜单
      let openMenu = this.$refs.navbar.openedMenus.concat([])
      // 获取点击菜单的父级index，如果当前点击的是根节点，则直接关闭所有打开菜单
      let nowMenuPath = indexPath.length > 1 ? indexPath[indexPath.length - 2] : ''
      if (nowMenuPath) {
        // 获取父级index在数组中索引，关闭其后所有的菜单
        let menuIndex = openMenu.indexOf(nowMenuPath)
        openMenu = openMenu.slice(menuIndex + 1)
      }
      // 关闭菜单
      openMenu = openMenu.reverse()
      openMenu.forEach((ele) => {
        this.$refs.navbar.closeMenu(ele)
      })
      if (this.navMode === 'horizontal') {
        this.navBgShow = false
      }
    },
    openMenu() {
      if (this.navMode === 'horizontal') {
        this.navBgShow = true
      }
    },
    closeMenu() {
      if (this.navMode === 'horizontal') {
        this.navBgShow = false
      }
    },
    closeAll() {
      let openMenu = this.$refs.navbar.openedMenus.concat([])
      openMenu = openMenu.reverse()
      openMenu.forEach((ele) => {
        this.$refs.navbar.closeMenu(ele)
      })
      if (this.navMode === 'horizontal') {
        this.navBgShow = false
      }
    }
  },
  components: { navItem }
}
</script>
